<script setup lang="ts">

import { ref,onMounted, onUnmounted } from 'vue';

import type { UserTask } from '@/types/workflow';
import dialog from '@/util/DialogTool';
import NoDataBox from '@/components/NoData.vue';
import { useTaskCountStore } from '@/stores/taskCount';
import { getToReadList } from '@/api/UserTaskApi';
import { useSearchStore, useTabViewStore ,useListViewDataStore} from '@/stores';
import mitter, { type SearchParam } from '@/util/mitt';
import { filterTaskList, setDocTypeCount } from '@/util/SetDocTypeCountTool';
import type { FilterDocType } from '@/types/common';


const loading = ref(false);
const noData = ref(false);
const key = ref('')
const taskList = ref<UserTask[]>()
const allList = ref<UserTask[]>()
const taskCountStore = useTaskCountStore();
const searchStore = useSearchStore();
const tabViewStore = useTabViewStore();
const listviewData = useListViewDataStore();

onMounted(()=>{

    init();
    mitter.on("showToRead",()=>{init()})
    mitter.on("search",handleSearch);
    mitter.on("filter",handleFilter);
});

onUnmounted(()=>{
    mitter.off("filter",handleFilter);
    mitter.off("showToRead")
    mitter.off("search",handleSearch);
})


const init = ()=>{
    if(listviewData.toRead.key){
        key.value = listviewData.toRead.key
    }else{
        key.value = ''
    }

    //刷新列表
    getList();
 

    //设置搜索关键词、分类的显示
    if(tabViewStore.currentView.toRead){         
        searchStore.setKey(key.value)//设置搜索关键词        
        tabViewStore.setCurrentFilter(listviewData.toRead.filterType);//设置分类
    }
}




const handleSearch = (e:SearchParam)=>{    
    if(e.type != 'toRead') return;

    //记录一下，在切换回来时重新显示搜索词
    listviewData.toRead.key = e.key;

    key.value = e.key;
    getList();
};




const handleFilter = (type:FilterDocType)=>{

    if(!tabViewStore.currentView.toRead)return;

    //记录一下，在切换回来时重新显示这个标签
    listviewData.toRead.filterType = type;
    doFilter(type);

};

const doFilter = (type:FilterDocType)=>{
    if(allList.value){
        taskList.value =  filterTaskList(allList.value,type);

        if(taskList.value.length == 0){
            noData.value = true;
        }else{
            noData.value = false;
        }
    }
}

const getList = async ()=>{
    dialog.showLoading();
    taskList.value = [];

    getToReadList(key.value).then((list)=>{
        loading.value = false;
        dialog.closeToast();

        if(list){        
            noData.value = false;
            taskList.value = list;
            allList.value = list;
            taskCountStore.setToRead(list.length)
            if(tabViewStore.currentView.toRead){
                setDocTypeCount(list);//设置公文类型的数量
                if(listviewData.toRead.filterType){//刷新页面后，如果当前标签有筛选，则过滤下
                    doFilter(listviewData.toRead.filterType);
                }
            }
            
        }

        if(list?.length == 0 || !list){
            noData.value = true;
            taskCountStore.setToRead(0)
        }
    }).catch(()=>{
        loading.value = false;
        dialog.closeToast();
    });
    


    
}

const onRefresh = () => {    
    getList();
};
</script>

<template>


<div class="toReadList">
    

    <van-pull-refresh v-model="loading" @refresh="onRefresh" >
        <NoDataBox v-if="noData"  text="暂无待阅公文"/>
        
        <div class="content" v-if="!noData">
            <UserTaskItem  v-for="item in taskList" :task="item"/>
        </div>   
    </van-pull-refresh>

    <van-back-top />

</div>

</template>

<style lang="less">
    .toReadList{
        display: block;
        
        
        .content{
            
            padding:10px;
            padding-bottom: 1.5rem;
            margin-top: 2rem;
            margin-top: 10px;
            min-height: 400px;
            
        }
    }


</style>
<style lang="css">
   
 @media screen and (min-width: 1024px) {
  
    .toReadList  .content{
        margin-top: 0px;
        padding-left: 0;
        padding-right: 0;
    }
}
</style>